import React from 'react'
import Footer from '../../components/common/footer/index'
import { Tabs } from 'antd-mobile'
import { Learn } from './style'
import { connect } from 'react-redux'

import { courses, oldLearn, progressed, subject } from '../../api'

const tabs = [{ title: '学习', sub: '0' }, { title: '做题', sub: '1' }]

const arr = require('../../assets/img_arr.png')
class Course extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      coursesList: [],
      worksList: [],
      oldCourses: '',
      progressInfo: '',
      index: 0
    }
  }
  componentWillMount() {
    if (this.props.location.search) {
      this.setState({
        index: 1
      })
    }
  }
  componentDidMount() {
    courses().then(res => {
      this.setState({
        coursesList: res.data.data
      })
    })

    subject().then(res => {
      this.setState({
        worksList: res.data.data
      })
    })

    oldLearn({
      mid: this.props.userInfo.id
    }).then(res => {
      this.setState({
        oldCourses: res.data.data
      })
      progressed({
        mid: this.props.userInfo.id,
        sid: res.data.data.subject_id
      }).then(res => {
        this.setState({
          progressInfo: res.data.data
        })
      })
    })
  }
  // 时间转换
  transtionTime(str) {
    if (str) {
      let arr = (str + '').split(':')
      return parseInt(arr[0]) * 60 + parseInt(arr[1]) + 1
    }
  }
  goCourse(id) {
    this.props.history.push('/course/' + id)
  }
  goProgress() {
    this.props.history.push('/progress/' + this.state.oldCourses.subject_id)
  }
  goTopic(sid, cid) {
    this.props.history.push('/topic/' + sid + '/' + cid)
  }
  render() {
    return (
      <div>
        <Tabs
          tabs={tabs}
          initialPage={this.state.index}
          tabBarActiveTextColor="#c29c5d"
          tabBarUnderlineStyle={{ borderColor: '#c29c5d' }}
          onChange={(tab, index) => {
            console.log('onChange', index, tab)
          }}
          onTabClick={(tab, index) => {
            console.log('onTabClick', index, tab)
          }}
        >
          <Learn>
            {this.state.oldCourses && (
              <div>
                <div className="xxjd" onClick={this.goProgress.bind(this)}>
                  <img src={arr} alt="" /> 总学习概况：
                  {this.state.progressInfo.lerant_progresse}
                </div>
                <div
                  className="prev"
                  onClick={this.goCourse.bind(
                    this,
                    this.state.oldCourses.course &&
                      this.state.oldCourses.course.id
                  )}
                >
                  <div className="title">
                    <span>未完成</span>上次学习
                  </div>
                  <video
                    src={
                      this.state.oldCourses.course &&
                      this.state.oldCourses.course.video_uri
                    }
                  />
                  <h2>
                    {this.state.oldCourses.course &&
                      this.state.oldCourses.course.title}
                  </h2>
                  <p>
                    {this.state.oldCourses.course &&
                      this.state.oldCourses.course.describe}
                  </p>
                  <div className="time">
                    共
                    {this.state.oldCourses &&
                      this.transtionTime(this.state.oldCourses.course_time)}
                    分钟，已学习
                    {this.state.oldCourses &&
                      this.transtionTime(this.state.oldCourses.learnt_time)}
                    分钟
                  </div>
                </div>
              </div>
            )}
            {this.state.coursesList.map(prentItem => {
              return (
                <div className="kc" key={prentItem.id}>
                  <div className="title">{prentItem.title}</div>
                  <ul>
                    {prentItem.units.map(item => {
                      return (
                        <li
                          key={item.id}
                          onClick={this.goCourse.bind(this, item.id)}
                        >
                          <img src={item.thumb} alt="" />
                          <div className="hidden">
                            <h2>{item.title}</h2>
                            <p>{item.describe}</p>
                          </div>
                        </li>
                      )
                    })}
                  </ul>
                </div>
              )
            })}
          </Learn>
          <Learn>
            {this.state.oldCourses && (
              <div className="xxjd" onClick={this.goProgress.bind(this)}>
                <img src={arr} alt="" /> 总做题概况：
                {this.state.progressInfo.finsh_progresse}
              </div>
            )}
            {this.state.worksList.map(prentItem => {
              return (
                <div className="kc" key={prentItem.id}>
                  <div className="title">{prentItem.title}</div>
                  <ul>
                    {prentItem.works.map(item => {
                      return (
                        <li
                          key={item.course_id}
                          onClick={this.goTopic.bind(
                            this,
                            item.subject_id,
                            item.course_id
                          )}
                        >
                          <img src={item.thumb} alt="" />
                          <div className="hidden">
                            <h2>{item.title}</h2>
                            <p>{item.describe}</p>
                          </div>
                        </li>
                      )
                    })}
                  </ul>
                </div>
              )
            })}
          </Learn>
        </Tabs>
        <Footer atthis="learn" />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  userInfo: state.userInfo
})

export default connect(mapStateToProps)(Course)
